<template>
	
	<scroll-view style="padding-bottom: 70px; height: 540px;" scroll-y="true" :scroll-top="scroll_top">
		<block v-for="(item, i) in msg" :key="i">
		
			<block v-if="user_id != item.userId">
			  <view class="top">
				<image class="face" :src="photo2"></image>
				<view class="nick">{{nickname2}}</view>
			  </view>
			  <view class="bot">
				<text class="bot-text">{{item.text}}</text>
			  </view>
			</block>
			
			<block v-if="user_id == item.userId">
				
				<view class="top-right">
					<view></view>
					<view class="top-2">
					  <view class="nick-right">{{nickname1}}</view>
					  <image class="face-right" :src="photo1"></image>
					</view>
				  </view>
				  <view class="bot-right">
					<text class="bot-text">{{item.text}}</text>
				  </view>

			</block>
		
		</block>
		
			
		<view class="pub-comment">
		  <view class="pub-left">
		    <input class="pub-input" @input="getInputValue" v-model="inputValue"></input>
		  </view>
		
		  <view class="pub-button" @click="publishChat">发送</view>
		</view>
	</scroll-view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				data: {},
				recv_id: "",
				msg: [],
				photo1: "",
				photo2: "",
				nickname1: "",
				nickname2: "",
				inputValue: "",
				scroll_top: 0,
				timer: null
			};
		},
		onLoad(e) {
			this.recv_id = e.recv_id
			this.cha()
			this.getphoto()
		},
		onShow() {
			let that = this
		    this.timer = setInterval(function () {
				that.cha()
			   }, 1000)
		},
		onUnload() {
		    if(this.timer) {
		      	clearInterval(this.timer);
		      	this.timer = null;
		    }
		},
		computed: {
			...mapState('m_my', ['user_id'])
		},
		methods: {
			async cha(){
				const db = uniCloud.database()
				//用await保证函数彻底执行完，数据返回完毕后再执行下面的代码,limit(1),取第一条数据，get(),执行查询操作
				this.res = await db.collection("chat").get()
				let store_res = await db.collection("store_message").get()
				//获得的数据藏在res.result.data里，取值就行了
				this.data = this.res.result.data.find(x => ((x.id1 == this.user_id && x.id2 == this.recv_id) || (x.id2 == this.user_id && x.id1 == this.recv_id))) || {}
				let store_data = store_res.result.data.find(x => (x.send_id == this.user_id && x.recv_id == this.recv_id)) || {}
				if(JSON.stringify(store_data) == '{}'){
					db.collection("store_message").add({
						"send_id": this.user_id,
						"recv_id": this.recv_id,
						"recv_num": 0
					})
				}
				
				store_data = store_res.result.data.find(x => (x.send_id == this.recv_id && x.recv_id == this.user_id)) || {}
				
				if(JSON.stringify(store_data) == '{}'){
					db.collection("store_message").add({
						"send_id": this.recv_id,
						"recv_id": this.user_id,
						"recv_num": 0
					})
				}
				
				if(JSON.stringify(this.data) == '{}'){
				
					await db.collection("chat").add({
						"id1":this.user_id,
						"id2":this.recv_id,
						"msg": this.msg,
						"id1_num":0,
						"id2_num":0
					}).then(e=>{
					 	console.log("上传完毕")
					})	
				}else{
					this.msg = this.data.msg
					if(this.data.id1 == this.user_id){
						this.store_res3 = await db.collection('store_message').where({
							"send_id": this.user_id,
							"recv_id": this.recv_id
						}).update({
							recv_num: this.data.id2_num
						})
					}else{
						this.store_res3 = await db.collection('store_message').where({
							"send_id": this.user_id,
							"recv_id": this.recv_id
						}).update({
							recv_num: this.data.id1_num
						})
					}		
				}

				this.scroll_top = 70 * this.msg.length
		
			},
			async getphoto() {
				const db1 = uniCloud.database()
				this.res1 = await db1.collection("user").get()

				this.photo1 = this.res1.result.data.find(x => x.openid === this.user_id).photo
				this.photo2 = this.res1.result.data.find(x => x.openid === this.recv_id).photo
				this.nickname1 = this.res1.result.data.find(x => x.openid === this.user_id).nickname
				this.nickname2 = this.res1.result.data.find(x => x.openid === this.recv_id).nickname
			},
			async publishChat(){
				
				if(!this.inputValue) return
			    var that = this;		
			    var new_msg = {}
				var old_id1 = 
			    new_msg.userId = this.user_id
			    new_msg.text = that.inputValue
			
			    this.msg.push(new_msg)
			    console.log(this.msg)
				let db1 = uniCloud.database()
				
				this.res3 = db1.collection('chat').where({
					"id1":this.user_id, 
					"id2":this.recv_id
				}).update({
					msg: this.msg,
					id1_num: this.data.id1_num + 1
				})
	
				
				if(this.res3.success !== true){
					this.res4 = await db1.collection('chat').where({
						"id2":this.user_id, 
						"id1":this.recv_id
					}).update({
						msg: this.msg,
						id2_num: this.data.id2_num + 1
					})	
				}

		//		that.cha()
				this.inputValue = ""
				  
			  },
						
			  // 功能：获取输入框的值
			getInputValue(event){						
				this.inputValue = event.detail.value			    
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	.pub-comment {
	  border-top: 1px solid #7f7f7f;
	  background-color: #F7F7F7;
	  width: 100%;
	  padding: 20rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  position: fixed;
	  bottom: 0;
	}
	.pub-left {
	  background-color: #fff;
	  color: #7F7F7F;
	  width: 80%;
	  border-radius: 10rpx;
	  margin-right: 10rpx;
	}
	.pub-input {
	  padding: 10rpx 10rpx;
	  width: 500rpx;
	}
	.pub-button {
	  color: #7F7F7F;
	  border-radius: 10rpx;
	  padding: 10rpx 20rpx;
	  direction:ltr;
	}



	.top {
	  display: flex;
	  flex-direction: row;
	  margin: 20rpx 20rpx 0 20rpx;
	}
	.top-2 {
	  display: flex;
	  flex-direction: row;
	}
	.top-right {
	  display: flex;
	  flex-direction: row;
	  margin: 20rpx 20rpx 0 20rpx;
	  justify-content: space-between;
	}
	.face {
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 10rpx;
	  margin-right: 5rpx;
	}
	.face-right {
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 10rpx;
	  margin-left: 20rpx;
	}
	.bot {
	  margin-left: 160rpx;
	  margin-right: 5rpx;
	 
	}

	.bot-right {
	  margin-right: 160rpx;
	  margin-left: 20rpx;
	  
	  text-align: right;
	}
	.bot-text {
	  background-color: #F7F7F7;
	  padding: 10rpx 10rpx;
	  border-radius: 20rpx;
	}
	.nick {
	  margin-top: 35rpx;
	  font-size: 13px;
	  font-weight: bold;
	}
	.nick-right {
	  margin-top: 35rpx;
	  font-size: 13px;
	  font-weight: bold;
	}

</style>
